import React, { Component } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Button, Table, Input, Tooltip } from 'antd';
import router from 'umi/router';
import styles from './Detailed.less';
import * as apis from '@/services/SystemMgr';
import Mpagination from '../components/Mpagination';
import SetDataJurisdiction from './pages/SetDataJurisdiction';
import AuthorizedButton from '@/components/AuthorizedButton';

export default class Detailed extends Component {
  constructor() {
    super();
    this.state = {
      total: '0', // 总条数
      pageSize: '20', // 每页显示条数
      current: '1', // 当前页数
      pages: '0', // 总页数
      detailedColumns: [
        {
          key: 'key',
          title: '序号',
          dataIndex: 'key',
          align: 'center',
          width: '5%',
        },
        {
          title: '岗位名称',
          dataIndex: 'name',
          key: 'name',
          width: '15%',
          render: text => (
            <div>
              <Tooltip placement="topLeft" title={text}>
                <div
                  style={{
                    width: '100%',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                  }}
                >
                  {text}
                </div>
              </Tooltip>
            </div>
          ),
        },
        {
          title: '所属部门',
          dataIndex: 'department',
          key: 'department',
          width: '35%',
          render: text => (
            <div>
              <Tooltip placement="topLeft" title={text.replace(/-/g, '  - ')}>
                <div
                  style={{
                    width: '100%',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                  }}
                >
                  {text.replace(/-/g, '  - ')}
                </div>
              </Tooltip>
            </div>
          ),
        },
        {
          title: '权限名称',
          dataIndex: 'Jurisdiction',
          key: 'Jurisdiction',
          render: text => (
            <div>
              <Tooltip
                placement="topLeft"
                title={<div style={{ height: '40px', overflow: 'auto' }}>{text.join(' - ')}</div>}
              >
                <div
                  style={{
                    width: '100%',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                  }}
                >
                  {text.join(' - ')}
                </div>
              </Tooltip>
            </div>
          ),
        },
        {
          title: '操作',
          align: 'center',
          width: '10%',
          render: (text, record) => (
            <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <AuthorizedButton authority="systemConfig_LimitsOfAuthorityManage_post_dataLimitsOfAuthority">
                <SetDataJurisdiction
                  type="positionId"
                  name={record.name}
                  Id={record.id}
                  upData={() => this.getPostAuthPageUsing()}
                />
              </AuthorizedButton>
            </span>
          ),
        },
      ],
      detailedData: [],
      loading: true,
    };
  }

  // 初次加载数据
  componentDidMount() {
    this.getPostAuthPageUsing();
  }

  async getPostAuthPageUsing(current = '1', searchName = '', pageSize = '20') {
    this.setState({ detailedData: [], loading: true });
    const params = {
      current, // 当前第几页
      belongJobDefId: this.props.location.query.id, // 岗位组id
      jobName: searchName, // 岗位名称
      pageSize, // 每页条数
    };
    const getPotGroupAuthPageUsing = await apis.getPostAuthPageUsingGET({ params });
    if (getPotGroupAuthPageUsing.code === 1) {
      const { data } = getPotGroupAuthPageUsing;
      const detailedData = [];
      data.list.forEach((item, index) => {
        detailedData.push({
          key: index + 1,
          name: item.jobName,
          department: item.belongDepFullName,
          Jurisdiction: item.perName,
          id: item.jobNum,
        });
      });
      this.setState({
        detailedData,
        total: data.total, // 总条数
        pageSize: data.pageSize, // 每页显示条数
        current: data.current, // 当前页数
        pages: data.pages, // 总页数
        loading: false,
      });
    }
  }

  // 分页切换
  handlePaginationChange = (current, pageSize) => {
    console.log(this.state.searchName);
    this.getPostAuthPageUsing(current, this.state.searchName, pageSize);
  };

  // 修改每页参数
  onShowSizeChange = (current, pageSize) => {
    this.handlePaginationChange(current, `${pageSize}`);
  };

  // 搜索
  handleSearchChange = value => {
    this.setState({ searchName: value });
    this.getPostAuthPageUsing('1', value, this.state.pageSize);
  };

  render() {
    const tableHeight = document.body.clientHeight - 210;
    return (
      <div className={styles.detailed}>
        <PageHeaderWrapper
          breadcrumb={null}
          title={unescape(this.props.location.query.name)}
          extra={
            <div style={{ display: 'flex' }}>
              <Button
                onClick={() => {
                  router.push({
                    pathname: '/SystemManage/limitAdministration',
                    query: {
                      activeKey: 'Job_group',
                    },
                    // state: {
                    //   current: this.props.location.query.current,
                    //   pageSize: this.props.location.query.pageSize,
                    //   searchValue: this.props.location.query.searchValue,
                    // },
                  });
                }}
              >
                返回
              </Button>
              <Input.Search
                placeholder="请输入名称搜索"
                onSearch={this.handleSearchChange}
                // enterButton
                style={{ marginLeft: '5px' }}
              />
            </div>
          }
        >
          <Card>
            <div className="table">
              <Table
                columns={this.state.detailedColumns}
                dataSource={this.state.detailedData}
                pagination={false}
                bordered
                scroll={{ y: tableHeight }}
                size="middle"
                loading={this.state.loading}
              />
              <Mpagination
                total={this.state.total}
                pageSize={this.state.pageSize}
                current={this.state.current}
                pages={this.state.pages}
                onShowSizeChange={(current, pageSize) => this.onShowSizeChange(current, pageSize)}
                handlePaginationChange={this.handlePaginationChange}
              />
            </div>
          </Card>
        </PageHeaderWrapper>
      </div>
    );
  }
}
